<template>
  <div class="auth2-container">
    <div class="auth2-box">
      <div class="login-box">
        <div class="w-full h-[50px] flex justify-center items-center">
          <h2 class="text-xl">用户登录</h2>
        </div>
        <lj-input v-model="usernameValue" :message="usernameErrorMessage" :label="usernameLabel" :name="usernameName" />
        <lj-input
          v-model="passwordValue"
          :message="passwordErrorMessage"
          :label="passwordLabel"
          :name="passwordName"
          class="mt-5" />
        <el-button type="primary" class="w-full mt-7">登 录</el-button>
      </div>
      <div>
        <img src="../../../public/draw.jpg" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ljInput from '@/components/auth2/ljInput.vue'
import { useField, configure, defineRule } from 'vee-validate'
import { localize } from '@vee-validate/i18n'
import { required, email, min, max } from '@vee-validate/rules'
import zh_CN from '@vee-validate/i18n/dist/locale/zh_CN.json'

defineRule('required', required)
defineRule('email', email)
defineRule('min', min)
defineRule('max', max)

configure({
  generateMessage: localize('zh_CN', zh_CN),
})

const {
  value: usernameValue,
  errorMessage: usernameErrorMessage,
  label: usernameLabel,
  name: usernameName,
} = useField(
  'username',
  {
    required: true,
  },
  { label: '姓名' },
)

const {
  value: passwordValue,
  errorMessage: passwordErrorMessage,
  label: passwordLabel,
  name: passwordName,
} = useField(
  'password',
  {
    required: true,
    min: 6,
    max: 15,
  },
  { label: '密码' },
)
</script>

<style lang="scss" scoped>
.auth2-container {
  @apply w-screen h-screen flex justify-center items-center box-border bg-gradient-to-b from-[#81ecec] to-[#a29bfe];
  .auth2-box {
    @apply w-[720px] h-[350px] grid grid-cols-2 border bg-white rounded-lg shadow-md overflow-hidden duration-300;
    .login-box {
      @apply m-10;
    }
  }
}
</style>
